<template>
  <div class="list-wrapper">
    <div class="list-main">
      <!-- 顶部 -->
      <!-- 侧边栏 统计导航 -->
      <div class="list-nav">
        <!-- <div class="list-nav-title">
            <span>统计导航</span><i class="fa fa-outdent" />
          </div> -->
        <el-menu class="list-menu">
          <el-submenu
            :index="item.key"
            v-for="item in leftList"
            :key="item.key"
          >
            <template slot="title">
              <span>{{ formatData[item.key] }}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item
                v-for="Item in item.res"
                :index="Item[0]"
                :key="Item[0]"
                @click="changeSelect(item, Item)"
              >
                <!-- <p>
                  {{ Item[0] }}<span>{{ Item[1] }}</span>
                </p> -->
                <p>
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="Item[0]"
                    placement="top"
                  >
                    <i
                      style="
                          width: 85%;
                          font-style: normal;
                          display: inline-block;
                          color: black;
                          text-overflow: ellipsis;
                          overflow: hidden;
                          white-space: nowrap;
                        "
                      >{{ Item[0] }}</i
                    >
                  </el-tooltip>
                  <span>{{ Item[1] }}</span>
                </p>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </div>
      <div class="list-t">
        <!-- <div class="list-t-l">概览</div> -->
        <!-- <div class="list-t-l"></div> -->
        <div class="list-t-r">
          <div class="list-t-r-action">
            <el-button size="medium" @click="openMark()">
              <i class="fa fa-pencil" />概览标注
            </el-button>
            <el-button size="medium" @click="openRatio">
              <i class="fa fa-exchange" />对比栏
            </el-button>
            <el-button size="medium" @click="ybkbnt">
              <i class="fa fa-file-text-o" />样本库
            </el-button>
            <el-dropdown @command="exportdoc">
              <el-button>
                导出<i class="el-icon-arrow-down el-icon--right" />
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="1">案件基本信息</el-dropdown-item>
                <el-dropdown-item command="2">案件详细信息</el-dropdown-item>
                <el-dropdown-item command="3">概览数据</el-dropdown-item>
                <el-dropdown-item command="4">决定全文</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-button
              size="medium"
              type="primary"
              @click="skipping"
              style="display:none;"
            >
              <i class="fa fa-search" />二次检索
            </el-button>
          </div>
        </div>
        <div class="list-content">
          <!-- 列表-->
          <div class="list-list">
            <div class="list-l-wrap">
              <div class="list-filter">
                <!-- 排序 -->
                <div class="list-filter-l">
                  <div class="sort_list">
                    <div
                      class="sort_box"
                      v-for="item in sortFields"
                      :key="item.id"
                    >
                      <div
                        class="sort_item"
                        @click="
                          sortId = item.id;
                          selSort(item);
                        "
                      >
                        <div>
                          {{ item.name }}
                        </div>
                        <div class="sort_icon_box">
                          <div
                            :class="[
                              'sort_icon',
                              sortId == item.id && item.sort == '+' + item.name
                                ? 'activeIcon'
                                : ''
                            ]"
                          >
                            <i class="el-icon-caret-top"></i>
                          </div>
                          <div
                            :class="[
                              'sort_icon',
                              sortId == item.id && item.sort == '-' + item.name
                                ? 'activeIcon'
                                : ''
                            ]"
                          >
                            <i class="el-icon-caret-bottom"></i>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- 全部选择  展开 收起 -->
                <div class="list-filter-r">
                  <el-checkbox
                    v-model="checkAll"
                    :indeterminate="isIndeterminate"
                    @change="handleCheckAllChange"
                    >全部选择</el-checkbox
                  >
                  <p
                    :class="[
                      { 'is-active': !showAllShrink },
                      'list-filter-open'
                    ]"
                    @click="collapseAll"
                  >
                    <span>{{ showAllShrink ? "全部展开" : "全部收起" }}</span>
                    <i class="fa fa-angle-double-down"></i>
                  </p>
                </div>
              </div>
              <!-- table -->
              <div class="list-table">
                <el-checkbox-group
                  v-model="checkedList"
                  @change="handleCheckedListChange"
                >
                  <el-collapse v-model="activeNames" @change="handleChange">
                    <div
                      class="list-table-item"
                      v-for="(item, index) in list"
                      :key="index"
                    >
                      <div class="list-table-item-t">
                        <div class="list-table-l">
                          <div class="list-table-head">
                            <el-checkbox :label="item.申请号">
                              <span style="display:none"
                                >{{ item.申请号 }} {{ item.发明创造名称 }}</span
                              >
                            </el-checkbox>
                            <b @click="goURL(item)">
                              {{ item.申请号 }} {{ item.发明创造名称 }}</b
                            >
                            <span class="list-t-h-tag" v-if="item.决定结果">
                              {{ item.决定结果 }}
                            </span>
                          </div>
                          <div class="list-table-body">
                            <el-row v-if="form.dataSource == 'susong'">
                              <el-col :span="12">
                                <el-col :span="9" class="text-right"
                                  >案件编号:</el-col
                                >
                                <el-col :span="15">{{ item.案件编号 }}</el-col>
                              </el-col>
                              <el-col :span="12">
                                <el-col
                                  :span="9"
                                  class="text-right"
                                  style="padding-right: 19px;"
                                  >决定号:</el-col
                                >
                                <el-col :span="15">{{ item.决定号 }}</el-col>
                              </el-col>
                              <el-col :span="12">
                                <el-col :span="9" class="text-right"
                                  >决定日:</el-col
                                >
                                <el-col :span="15">{{ item.决定日 }}</el-col>
                              </el-col>
                              <el-col :span="12">
                                <el-col :span="9" class="text-right"
                                  >合议组长：</el-col
                                >
                                <el-col :span="15">{{ item.合议组长 }}</el-col>
                              </el-col>
                              <el-col :span="12">
                                <el-col :span="9" class="text-right"
                                  >国际分类号：</el-col
                                >
                                <el-col :span="15">{{
                                  item.国际分类号
                                }}</el-col>
                              </el-col>
                              <el-col :span="12">
                                <el-col :span="9" class="text-right"
                                  >案源处室：</el-col
                                >
                                <el-col :span="15">{{ item.案源处室 }}</el-col>
                              </el-col>
                            </el-row>
                            <el-row v-else>
                              <el-col :span="12">
                                <el-col :span="8" class="text-right"
                                  >案件编号</el-col
                                >
                                <el-col :span="16">{{ item.案件编号 }}</el-col>
                              </el-col>
                              <el-col :span="12">
                                <el-col :span="8" class="text-right"
                                  >决定号：</el-col
                                >
                                <el-col :span="16">{{ item.决定号 }}</el-col>
                              </el-col>
                              <el-col :span="12">
                                <el-col :span="8" class="text-right"
                                  >决定日：</el-col
                                >
                                <el-col :span="16">{{ item.决定日 }}</el-col>
                              </el-col>
                              <el-col :span="12">
                                <el-col :span="8" class="text-right"
                                  >主分类号：</el-col
                                >
                                <el-col :span="16">{{ item.主分类号 }}</el-col>
                              </el-col>
                              <el-col :span="12">
                                <el-col :span="8" class="text-right"
                                  >合议组长：</el-col
                                >
                                <el-col :span="16">{{
                                  item.合议组长姓名
                                }}</el-col>
                              </el-col>
                              <el-col :span="12">
                                <el-col :span="8" class="text-right"
                                  >案源处室：</el-col
                                >
                                <el-col :span="16">{{ item.案源处室 }}</el-col>
                              </el-col>
                            </el-row>
                          </div>
                        </div>
                        <div class="list-table-r">
                          <div>
                            <!-- <el-button
                              size="medium"
                              type="danger"
                              @click.stop.prevent="deleteItem(index)"
                            >
                              <i class="fa fa-trash-o" />删除
                            </el-button> -->
                            <el-button
                              type="primary"
                              style="color:#fff;"
                              @click="_personalLikeCancelCases(item)"
                            >
                              <i
                                class="fa fa-thumbs-o-up bold"
                                aria-hidden="true"
                              ></i>
                              取消点赞</el-button
                            >
                          </div>
                          <div>
                            <el-button
                              size="medium"
                              @click.stop.prevent="addDuibi(item)"
                            >
                              <i class="fa fa-plus-circle" />添加对比
                            </el-button>
                          </div>
                        </div>
                      </div>
                      <div
                        class="list-table-item-b"
                        @click.stop.prevent="queryDetail(item)"
                      >
                        <el-collapse-item
                          :name="item.决定号"
                          class="list-collapse"
                        >
                          <template slot="title">
                            {{ item.showInfo ? "收起" : "展开"
                            }}<i class="fa fa-angle-double-down" />
                          </template>
                          <div class="list-collapse-con">
                            <!-- v-if="form.dataSource == 'fushen'" -->
                            <div
                              class="list-collapse-item"
                              v-if="form.dataSource == 'fushen'"
                            >
                              <div class="list-collapse-title">决定概要</div>
                              <div class="list-collapse-body">
                                <el-row>
                                  <el-col :span="8">
                                    <el-col :span="12" class="text-right"
                                      >专利（申请）号：</el-col
                                    >
                                    <el-col :span="12">{{
                                      fushenData.shenqingh
                                    }}</el-col>
                                  </el-col>
                                  <el-col :span="8">
                                    <el-col :span="12" class="text-right"
                                      >决定结果：</el-col
                                    >
                                    <el-col :span="12">{{
                                      fushenData.juedingjl
                                    }}</el-col>
                                  </el-col>
                                  <el-col :span="8">
                                    <el-col :span="12" class="text-right"
                                      >复审请求人：</el-col
                                    >
                                    <el-col :span="12">{{
                                      fushenData.fushenqqr
                                    }}</el-col>
                                  </el-col>
                                  <el-col :span="8">
                                    <el-col :span="12" class="text-right"
                                      >主审员：</el-col
                                    >
                                    <el-col :span="12">{{
                                      fushenData.zhusheny
                                    }}</el-col>
                                  </el-col>
                                  <el-col :span="8">
                                    <el-col :span="12" class="text-right"
                                      >国际分类号：</el-col
                                    >
                                    <el-col :span="12">{{
                                      fushenData.guojiflh
                                    }}</el-col>
                                  </el-col>
                                  <el-col :span="8">
                                    <el-col :span="12" class="text-right"
                                      >公开公告日：</el-col
                                    >
                                    <el-col :span="12">{{
                                      fushenData.gongkaiggr
                                    }}</el-col>
                                  </el-col>
                                  <el-col :span="8">
                                    <el-col :span="12" class="text-right"
                                      >涉及法条：</el-col
                                    >
                                    <el-col :span="12">{{
                                      fushenData.shejiftjd3
                                    }}</el-col>
                                  </el-col>
                                  <el-col :span="8">
                                    <el-col :span="12" class="text-right"
                                      >证据分类：</el-col
                                    >
                                    <el-col :span="12">{{
                                      fushenData.zhengjufl
                                    }}</el-col>
                                  </el-col>
                                </el-row>
                              </div>
                            </div>
                            <div class="list-collapse-item">
                              <div class="list-collapse-title">审查历史</div>
                              <div
                                class="list-collapse-body list-collapse-history"
                                v-for="(item, index) in fushenData.scls"
                                :key="index"
                              >
                                <div class="list-collapse-history-step">
                                  <div class="list-collapse-history-date">
                                    {{ item.riqi }}
                                  </div>
                                  <div class="list-collapse-history-name">
                                    {{ item.content }}
                                  </div>
                                </div>
                                <div
                                  class="list-collapse-history-line"
                                  v-if="index != fushenData.scls.length - 1"
                                >
                                  <i class="fa fa-angle-right" />
                                </div>
                              </div>
                            </div>
                          </div>
                          <div
                            class="list-collapse-con"
                            v-if="form.dataSource == 'wuxiao'"
                          >
                            <div class="list-collapse-item">
                              <div class="list-collapse-title">决定概要</div>
                              <div class="list-collapse-body">
                                <el-row>
                                  <el-col :span="8">
                                    <el-col :span="12" class="text-right"
                                      >专利（申请）号：</el-col
                                    >
                                    <el-col :span="12">{{
                                      wuxiaoData.shenqingh
                                    }}</el-col>
                                  </el-col>
                                  <el-col :span="8">
                                    <el-col :span="12" class="text-right"
                                      >决定结果：</el-col
                                    >
                                    <el-col :span="12">{{
                                      wuxiaoData.juedingjl
                                    }}</el-col>
                                  </el-col>
                                  <el-col :span="8">
                                    <el-col :span="12" class="text-right"
                                      >无效请求人：</el-col
                                    >
                                    <el-col :span="12">{{
                                      wuxiaoData.wuxiaozlqrxm
                                    }}</el-col>
                                  </el-col>
                                  <el-col :span="8">
                                    <el-col :span="12" class="text-right"
                                      >主审员：</el-col
                                    >
                                    <el-col :span="12">{{
                                      wuxiaoData.zhusheny
                                    }}</el-col>
                                  </el-col>
                                  <el-col :span="8">
                                    <el-col :span="12" class="text-right"
                                      >国际分类号：</el-col
                                    >
                                    <el-col :span="12">{{
                                      wuxiaoData.guojiflh
                                    }}</el-col>
                                  </el-col>
                                  <el-col :span="8">
                                    <el-col :span="12" class="text-right"
                                      >公开公告日：</el-col
                                    >
                                    <el-col :span="12">{{
                                      wuxiaoData.gongkaiggr
                                    }}</el-col>
                                  </el-col>
                                  <el-col :span="8">
                                    <el-col :span="12" class="text-right"
                                      >涉及法条：</el-col
                                    >
                                    <el-col :span="12">{{
                                      wuxiaoData.shejiftjd3
                                    }}</el-col>
                                  </el-col>
                                  <el-col :span="8">
                                    <el-col :span="12" class="text-right"
                                      >证据分类：</el-col
                                    >
                                    <el-col :span="12">{{
                                      wuxiaoData.zhengjufl
                                    }}</el-col>
                                  </el-col>
                                </el-row>
                              </div>
                            </div>
                            <div class="list-collapse-item">
                              <div class="list-collapse-title">审查历史</div>
                              <div
                                class="list-collapse-body list-collapse-history"
                                v-for="(item, index) in wuxiaoData.scls"
                                :key="index"
                              >
                                <div class="list-collapse-history-step">
                                  <div class="list-collapse-history-date">
                                    {{ item.riqi }}
                                  </div>
                                  <div class="list-collapse-history-name">
                                    {{ item.content }}
                                  </div>
                                </div>
                                <div
                                  class="list-collapse-history-line"
                                  v-if="index != wuxiaoData.scls.length - 1"
                                >
                                  <i class="fa fa-angle-right" />
                                </div>
                              </div>
                            </div>
                          </div>
                          <div
                            class="list-collapse-con"
                            v-if="form.dataSource == 'waiguan'"
                          >
                            <div class="list-collapse-item">
                              <div class="list-collapse-title">决定概要</div>
                              <div class="list-collapse-body">
                                <el-row>
                                  <el-col :span="8">
                                    <el-col :span="12" class="text-right"
                                      >专利（申请）号：</el-col
                                    >
                                    <el-col :span="12">{{
                                      waiguanData.shenqingh
                                    }}</el-col>
                                  </el-col>
                                  <el-col :span="8">
                                    <el-col :span="12" class="text-right"
                                      >决定号：</el-col
                                    >
                                    <el-col :span="12">{{
                                      waiguanData.juedingh
                                    }}</el-col>
                                  </el-col>
                                  <el-col :span="8">
                                    <el-col :span="12" class="text-right"
                                      >决定结果：</el-col
                                    >
                                    <el-col :span="12">{{
                                      waiguanData.juedingjl
                                    }}</el-col>
                                  </el-col>
                                  <el-col :span="8">
                                    <el-col :span="12" class="text-right"
                                      >申请日：</el-col
                                    >
                                    <el-col :span="12">{{
                                      waiguanData.shenqingr
                                    }}</el-col>
                                  </el-col>
                                  <el-col :span="8">
                                    <el-col :span="12" class="text-right"
                                      >决定日：</el-col
                                    >
                                    <el-col :span="12">{{
                                      waiguanData.juedingr
                                    }}</el-col>
                                  </el-col>
                                  <el-col :span="8">
                                    <el-col :span="12" class="text-right"
                                      >授权公告日：</el-col
                                    >
                                    <el-col :span="12">{{
                                      waiguanData.shouquanggr
                                    }}</el-col>
                                  </el-col>
                                  <el-col :span="8">
                                    <el-col :span="12" class="text-right"
                                      >发明创造名称：</el-col
                                    >
                                    <el-col :span="12">{{
                                      waiguanData.zhuanlimc
                                    }}</el-col>
                                  </el-col>
                                  <el-col :span="8">
                                    <el-col :span="12" class="text-right"
                                      >合议组长：</el-col
                                    >
                                    <el-col :span="12">{{
                                      waiguanData.heyizzxm
                                    }}</el-col>
                                  </el-col>
                                  <el-col :span="8">
                                    <el-col :span="12" class="text-right"
                                      >主审员：</el-col
                                    >
                                    <el-col :span="12">{{
                                      waiguanData.zhusheny
                                    }}</el-col>
                                  </el-col>
                                  <el-col :span="8">
                                    <el-col :span="12" class="text-right"
                                      >国际分类号：</el-col
                                    >
                                    <el-col :span="12">{{
                                      waiguanData.guojiflh
                                    }}</el-col>
                                  </el-col>
                                  <el-col :span="8">
                                    <el-col :span="12" class="text-right"
                                      >涉及法条：</el-col
                                    >
                                    <el-col :span="12">{{
                                      waiguanData.shejiftjd3
                                    }}</el-col>
                                  </el-col>
                                  <el-col :span="8">
                                    <el-col :span="12" class="text-right"
                                      >证据分类：</el-col
                                    >
                                    <el-col :span="12">{{
                                      waiguanData.zhengjufl
                                    }}</el-col>
                                  </el-col>
                                </el-row>
                              </div>
                            </div>
                            <div class="list-collapse-item">
                              <div class="list-collapse-title">审查历史</div>
                              <div
                                class="list-collapse-body list-collapse-history"
                                v-for="(item, index) in waiguanData.scls"
                                :key="index"
                              >
                                <div class="list-collapse-history-step">
                                  <div class="list-collapse-history-date">
                                    {{ item.riqi }}
                                  </div>
                                  <div class="list-collapse-history-name">
                                    {{ item.content }}
                                  </div>
                                </div>
                                <div
                                  class="list-collapse-history-line"
                                  v-if="index != waiguanData.scls.length - 1"
                                >
                                  <i class="fa fa-angle-right" />
                                </div>
                              </div>
                            </div>
                          </div>
                          <div
                            class="list-collapse-con"
                            v-if="form.dataSource == 'susong'"
                          >
                            <div class="list-collapse-item">
                              <div class="list-collapse-title">决定概要</div>
                              <div class="list-collapse-body">
                                <el-row>
                                  <el-col :span="8">
                                    <el-col :span="12" class="text-right"
                                      >专利（申请）号：</el-col
                                    >
                                    <el-col :span="12">{{
                                      susongData.shenqingh
                                    }}</el-col>
                                  </el-col>
                                  <el-col :span="8">
                                    <el-col :span="12" class="text-right"
                                      >决定结果：</el-col
                                    >
                                    <el-col :span="12">{{
                                      susongData.juedingjl
                                    }}</el-col>
                                  </el-col>
                                  <el-col :span="8">
                                    <el-col :span="12" class="text-right"
                                      >申请日：</el-col
                                    >
                                    <el-col :span="12">{{
                                      susongData.shenqingr
                                    }}</el-col>
                                  </el-col>
                                  <el-col :span="8">
                                    <el-col :span="12" class="text-right"
                                      >原告：</el-col
                                    >
                                    <el-col :span="12">{{
                                      susongData.yuangaoxm
                                    }}</el-col>
                                  </el-col>
                                  <el-col :span="8">
                                    <el-col :span="12" class="text-right"
                                      >被告：</el-col
                                    >
                                    <el-col :span="12">{{
                                      susongData.beigaoxm
                                    }}</el-col>
                                  </el-col>
                                  <el-col :span="8">
                                    <el-col :span="12" class="text-right"
                                      >第三人：</el-col
                                    >
                                    <el-col :span="12">{{
                                      susongData.disanrxm
                                    }}</el-col>
                                  </el-col>
                                  <el-col :span="8">
                                    <el-col :span="12" class="text-right"
                                      >审判长：</el-col
                                    >
                                    <el-col :span="12">{{
                                      susongData.shenpanz
                                    }}</el-col>
                                  </el-col>
                                  <el-col :span="8">
                                    <el-col :span="12" class="text-right"
                                      >审判员：</el-col
                                    >
                                    <el-col :span="12">{{
                                      susongData.shenpanypsy
                                    }}</el-col>
                                  </el-col>
                                  <el-col :span="8">
                                    <el-col :span="12" class="text-right"
                                      >书记员：</el-col
                                    >
                                    <el-col :span="12">{{
                                      susongData.shujiy
                                    }}</el-col>
                                  </el-col>
                                  <el-col :span="8">
                                    <el-col :span="12" class="text-right"
                                      >证据分类：</el-col
                                    >
                                    <el-col :span="12">{{
                                      susongData.zhengjufl
                                    }}</el-col>
                                  </el-col>
                                </el-row>
                              </div>
                            </div>
                            <div class="list-collapse-item">
                              <div class="list-collapse-title">审查历史</div>
                              <div
                                class="list-collapse-body list-collapse-history"
                                v-for="(item, index) in susongData.scls"
                                :key="index"
                              >
                                <div class="list-collapse-history-step">
                                  <div class="list-collapse-history-date">
                                    {{ item.riqi }}
                                  </div>
                                  <div class="list-collapse-history-name">
                                    {{ item.content }}
                                  </div>
                                </div>
                                <div
                                  class="list-collapse-history-line"
                                  v-if="index != susongData.scls.length - 1"
                                >
                                  <i class="fa fa-angle-right" />
                                </div>
                              </div>
                            </div>
                          </div>
                        </el-collapse-item>
                      </div>
                    </div>
                  </el-collapse>
                </el-checkbox-group>
              </div>
              <!-- 分页 -->
              <div class="list-pagination" v-if="this.list.length > 0">
                <el-pagination
                  :current-page="form.page"
                  :page-sizes="[10, 20, 30, 40, 50]"
                  :page-size="form.size"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 中间内容 -->
    </div>
    <!-- 添加个人标注 -->
    <mark-outer
      :showVisible.sync="markOuterVisible"
      :parentInfo="ratioList"
      @closeDialog="closeDialog"
    ></mark-outer>
    <!-- 添加至样本库 -->
    <sample-collection
      ref="sampleCollection"
      :markOption.sync="markOption"
      :list.sync="list"
      :checkedList.sync="checkedList"
      :dataSource="form.dataSource"
    ></sample-collection>
    <!-- 对比栏 -->
    <ratio
      :show.sync="ratioStatus"
      :list.sync="list"
      :ratioList.sync="ratioList"
    ></ratio>
  </div>
</template>
<script>
import { list, otherInformation } from "@api/overview/index";
// import ratio from "./components/ratio.vue";
import ratio from "@components/common/ratio.vue";
import MarkOuter from "@components/common/markOuter.vue";
import SampleCollection from "@components/common/sampleCollection.vue";
import { haveCases, personalLikeCancelCases } from "@api/details";
import { bankList, smpleAdd, bankAdd } from "@api/sampleBank/index";
import {
  decision,
  caseBasicInformation,
  caseDetails,
  overviewData
} from "@api/export/index";
export default {
  components: {
    ratio,
    MarkOuter,
    SampleCollection
  },
  data() {
    return {
      // 排序
      sortId: "",
      sortFields: [
        {
          id: "1",
          name: "决定日",
          sort: ""
        },
        {
          id: "2",
          name: "申请号",
          sort: ""
        },
        {
          id: "3",
          name: "请求日",
          sort: ""
        },
        {
          id: "4",
          name: "案件编号",
          sort: ""
        }
      ],
      formatData: {
        anjianfl: "案件分类",
        anjianlx: "案件类型",
        anjianjl: "案件结论",
        fatiaofl: "法条分类",
        heyizsf: "合议组身份"
      },
      showInfo: false,
      showAllShrin: false,
      // 排序
      options: [
        {
          value: "+决定日",
          label: "决定日"
        },
        {
          value: "+案件编号",
          label: "案件编号"
        },
        {
          value: "+决定号",
          label: "决定号"
        }
      ],
      list: [], //列表
      // 个人标注
      // 标注所在位置
      markOption: [
        {
          value: "1",
          label: "案由"
        },
        {
          value: "2",
          label: "决定的理由"
        },
        {
          value: "3",
          label: "决定"
        }
      ],
      // 添加个人标注
      ruleForm: {
        address: "1",
        fenlei: "1",
        notes: ""
      },
      // 新建标注分类
      addRuleForm: {
        fenlei: "",
        notes: ""
      },
      markOuterVisible: false,
      markInnerVisible: false,
      // 样本库
      // 添加至样本库
      ybkRuleForm: {
        address: "1"
      },
      // 新建样本库
      ybkAddRuleForm: {
        name: "",
        type: "",
        notes: ""
      },
      ybkOuterVisible: false,
      ybkInnerVisible: false,
      checkAll: false,
      checkedList: [],
      isIndeterminate: false,
      activeNames: [],
      showAllShrink: false, // 全部展开/收起 默认收起
      currentPage: 4,
      // 对比栏列表
      ratioList: [],
      ratioStatus: false,
      form: {
        dataSource: "",
        anjianlx: "",
        heyizsf: "",
        page: 1,
        size: 10,
        sortField: "+决定日"
      },
      stortRadio: "决定日",
      total: 0,
      // 左侧导航栏数据
      leftList: [],
      isSelect: {},
      fushenData: {}, //复审展开详情
      wuxiaoData: {}, //无效展开详情
      waiguanData: {}, //外观展开详情
      susongData: {} //司法判决展开详情
    };
  },
  props: {
    // haveCasesData: Object
  },
  watch: {
    activeNames: {
      handler(newVal) {
        this.showAllShrink = newVal.length === this.list.length;
        // this.list
        //   .forEach
        //   item => (
        //     item.showInfo = newVal.includes(item.案件编号))
        //   ();
      },
      deep: true
    }
  },
  created() {
    console.log(this.$route.query);
    // this.form.expId = this.$route.query.expList.expId;
    // this.form.exp = this.$route.query.expList.exp;
    // this.form.dataSource = this.$route.query.dataSource;
    this.form.dataSource = "fushen";
    // this.getList();
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 排序
    selSort(item) {
      console.log(item);
      if (item.sort == "" || item.sort == "-" + item.name) {
        item.sort = "+" + item.name;
      } else {
        item.sort = "-" + item.name;
      }
      this.form.sortField = item.sort;
      this.getList();
    },
    exportdoc(command) {
      console.log(command);
      if (command == 1) {
        // 案件基本信息
        this.quanwen();
      } else if (command == 2) {
        // 案件详细信息
        this.anjianjiben();
      } else if (command == 3) {
        // 概览数据
        this.anjianxx();
      } else if (command == 4) {
        // 决定全文
        this.anjiangl();
      }
    },
    async quanwen() {
      let _this = this;
      let param = {
        dataSource: this.form.dataSource,
        dataarry: []
      };
      this.list.map(function(ret) {
        _this.checkedList.map(function(res) {
          console.log(ret["申请号"]);
          console.log(res);
          if (ret["申请号"] == res) {
            let data = {
              anjianbh: ret["案件编号"],
              juedingh: ret["决定号"]
            };
            param.dataarry.push(data);
          }
        });
      });
      try {
        const { code, data, msg } = await decision(param);
        if (code == 200) {
        }
      } catch (error) {
        console.log(error);
      }
    },
    async anjianjiben() {
      let _this = this;
      let param = {
        dataSource: this.form.dataSource,
        dataarry: []
      };
      this.list.map(function(ret) {
        _this.checkedList.map(function(res) {
          console.log(ret["申请号"]);
          console.log(res);
          if (ret["申请号"] == res) {
            let data = {
              anjianbh: ret["案件编号"],
              juedingh: ret["决定号"]
            };
            param.dataarry.push(data);
          }
        });
      });
      try {
        const { code, data, msg } = await caseBasicInformation(param);
        if (code == 200) {
          console.log(code);
          console.log(data);
          console.log(msg);
        }
      } catch (error) {
        console.log(error);
      }
    },
    async anjianxx() {
      let _this = this;
      let param = {
        dataSource: this.form.dataSource,
        dataarry: []
      };
      this.list.map(function(ret) {
        _this.checkedList.map(function(res) {
          console.log(ret["申请号"]);
          console.log(res);
          if (ret["申请号"] == res) {
            let data = {
              anjianbh: ret["案件编号"],
              juedingh: ret["决定号"]
            };
            param.dataarry.push(data);
          }
        });
      });
      try {
        const { code, data, msg } = await caseDetails(param);
        if (code == 200) {
          console.log(code);
          console.log(data);
          console.log(msg);
        }
      } catch (error) {
        console.log(error);
      }
    },
    async anjiangl() {
      let _this = this;
      let classField = this.classField.join(",");

      console.log(classField);
      let param = {
        exp: this.form.exp,
        dataSource: this.form.dataSource,
        classField: classField
      };

      try {
        const { code, data, msg } = await overviewData(param);
        if (code == 200) {
          console.log(code);
          console.log(data);
          console.log(msg);
        }
      } catch (error) {
        console.log(error);
      }
    },
    async _personalLikeCancelCases(row) {
      const params = {
        anjianbh: row.anjianbh,
        juedingh: row.juedingh,
        anjianlx: row.anjianlx
      };
      const { code, data } = await personalLikeCancelCases(params);
      if (code == 200) {
        this.$message.success("取消点赞成功！");
        this.getList();
      }
    },
    toFormatName(val) {
      switch (val) {
        case "复审":
          return "fushen";
          break;
        case "无效":
          return "wuxiao";
          break;
        case "外观":
          return "waiguan";
          break;
        case "诉讼":
          return "susong";
          break;
      }
    },
    // 打开概览标注
    openMark() {
      if (this.checkedList.length > 0) {
        this.markOuterVisible = true;
      } else {
        this.$message.warning("请先选中案件");
      }
    },
    async ybkbnt() {
      if (this.checkedList.length < 1) {
        return this.$message.warning("请先选择案件");
      }
      try {
        const { code, data, msg } = await bankList();
        if (code == 200) {
          console.log(data);
          this.markOption = data;
        }
      } catch (error) {
        console.log(error);
      }
      this.$refs.sampleCollection.ybkOuterVisible = true;
    },
    closeDialog() {
      this.markOuterVisible = false;
    },
    goURL(item) {
      // 案件编号（anjianbh）、决定号（juedingh）、类型（dataSource）
      let data = {
        anjianbh: item.案件编号,
        juedingh: item.决定号,
        dataSource: this.form.dataSource
      };
      this.$router.push({
        path: "/pages/info/1",
        query: { data: JSON.stringify(data) }
      });
    },
    changeSelect(parent, item) {
      console.log(parent);
      console.log(item);
      this.activeNames = [];
      // this.handleChange([]);
      console.log(this.activeNames);
      if (parent.key == "anjianfl") {
        this.form.dataSource = this.toFormatName(item[0]);
      } else if (parent.key == "anjianlx") {
        this.form.anjianlx = item[0];
      } else if (parent.key == "heyizsf") {
        this.form.heyizsf = item[0];
      }
      // if (!this.isSelect[parent.key]) {
      //   this.isSelect[parent.key] = {};
      // }
      // Object.entries(this.isSelect[parent.key]).forEach(item => {
      //   this.isSelect[parent.key][item[0]] = false;
      // });
      // this.isSelect[parent.key][item[0]] = true;
      // let classifyExp = "";
      // Object.entries(this.isSelect).forEach(([, value]) => {
      //   Object.entries(value).forEach(([key, value]) => {
      //     value && (classifyExp += `${key},`);
      //   });
      // });
      // this.form.classifyExp = classifyExp;
      this.getList();
    },
    //添加对比
    addDuibi(item) {
      /* DLJ MODIFY START */
      if (this.ratioList.length >= 3) {
        this.$message("对不起，最多添加3个案件信息。");
      } else {
        if (!this.ratioList.some(i => item.申请号 === i.申请号)) {
          this.ratioList.push(item);
          this.checkAll = this.ratioList.length === this.list.length;
          this.checkedList = this.ratioList.map(item => item.申请号);
          this.isIndeterminate =
            this.ratioList.length > 0 &&
            this.ratioList.length !== this.list.length;
        } else {
          this.$message({
            showClose: true,
            message: "已添加",
            type: "success"
          });
          // this.getList();
        }

        this.ratioStatus = true;
      }
      /* DLJ MODIFY END */

      console.log(item);
    },
    // 打开对比栏
    openRatio() {
      this.ratioStatus = !this.ratioStatus;
    },
    /* 获取已审案件data*/
    // 获取列表
    async getList() {
      try {
        const { code, data } = await haveCases(this.form);
        if (code == 200) {
          this.total = data.total;
          this.list = data.docs.map((item, index) => {
            item.showInfo = false;
            // index === 0 && this.activeNames.push(item.案件编号);
            return item;
          });
          // this.list = this.list.concat(this.list);
          this.leftList = Object.entries(data.classInfos).map(item => {
            let [key, res] = item;
            res = Object.entries(res);
            return {
              key,
              res
            };
          });
        } else this.$message.error(res.msg);
      } catch (error) {
        console.log(error);
      }
    },
    // 是否展开 查询详情信息
    queryDetail(item) {
      this.$set(item, "showInfo", !item.showInfo);
      console.log(item);
      // this.showInfo = !this.showInfo;
      if (item.showInfo) {
        this.getOtherInformation(item);
      }
    },
    // 获取其他信息
    async getOtherInformation(item) {
      console.log(item);
      let params = {
        anjianbh: item.案件编号,
        juedingh: item.决定号,
        leixing: this.form.dataSource
      };
      const { code, data } = await otherInformation(params);
      console.log(data);
      switch (params.leixing) {
        case "fushen":
          this.fushenData = data;
          break;
        case "wuxiao":
          this.wuxiaoData = data;
          break;
        case "waiguan":
          this.waiguanData = data;
          break;
        case "susong":
          this.susongData = data;
          break;
      }
    },
    // 删除
    deleteItem(index) {
      this.list.splice(index, 1);
    },
    // 添加个人标注
    glMark() {},
    // 跳转高级检索 需要把第一次的检索参数带到上一个页面
    skipping() {
      this.$router.push({
        path: "advanced-search",
        query: {
          expList: JSON.stringify(this.form.exp),
          dataSource: this.form.dataSource
        }
      });
    },
    // 全选
    handleCheckAllChange(val) {
      console.log(val);
      if (val) {
        this.checkedList = this.list.map(item => item.申请号);
        this.ratioList = this.list.slice(0, 3);
        this.isIndeterminate = false;
      } else {
        this.checkedList = [];
        this.ratioList = [];
      }
    },
    handleCheckedListChange(value) {
      console.log(this.checkedList);
      console.log(value);
      const checkedCount = value.length;
      console.log(checkedCount);
      this.checkAll = checkedCount === this.list.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount !== this.list.length;
      if (value.length > 3) {
        return this.$message.warning("最大对比案件数3件");
      }
      this.ratioList = this.list.filter(obj =>
        value.some(obj1 => obj1 === obj.申请号)
      );
    },
    // 折叠面板
    handleChange(list) {
      console.log(list);
      console.log(this.showAllShrin);
      // this.list.forEach(item => {
      //   item.showInfo = !this.showAllShrink;
      // });
    },
    // 全部展开收缩
    collapseAll() {
      this.activeNames =
        this.activeNames.length == this.list.length
          ? []
          : // : this.list.map(item => item.案件编号);
            this.list.map(item => item.决定号);

      this.handleChange(this.activeNames);
    },
    // 翻页
    handleSizeChange(val) {
      this.form.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.form.page = val;
      this.getList();
    }
  }
};
</script>
<style lang="scss">
$blue-color: #2d54b8;
$main-color: #303133;
.sort_list {
  display: flex;
  justify-content: space-between;
  border: 1px solid #ccc;
  width: 500px;
  height: 36px;
  line-height: 36px;
  .sort_box {
    border-right: 1px solid #ccc;
    flex: 1;
    cursor: pointer;
    &:last-child {
      border: none;
    }
    .sort_item {
      display: flex;
      justify-content: center;
      .sort_icon_box {
        margin-top: -4px;
        .sort_icon {
          height: 8px;
          color: #ccc;
        }
        .activeIcon {
          color: #5959ff;
        }
      }
    }
  }
}
.list-main {
  .el-checkbox__inner::after {
    left: 5px;
    top: 2px;
  }
  .el-button {
    color: $main-color;
  }
}
// 菜单
.list-menu {
  border-radius: 4px;
  border-right: 1px solid #dcdfe6;
  background-color: #ffffff;
  .el-submenu__title {
    padding: 0 13px 0 15px !important;
    background-color: #ebeef5;
    color: $blue-color;
    font-size: 16px;
  }
  .el-submenu__title i {
    color: $blue-color;
  }
  .el-submenu__icon-arrow {
    font-weight: 700;
  }
  .el-menu-item-group__title {
    padding: 0;
  }
  .el-submenu {
    margin-bottom: 1px;
    &:last-child {
      margin-bottom: 0;
    }
    .el-menu-item {
      height: 46px;
      line-height: 46px;
      padding: 0 !important;
      p {
        margin: 0 0 0 15px;
        border-bottom: 1px solid #e4e7ed;
        padding: 0 13px 0 0;
      }
      &:last-child {
        border-bottom: 0;
      }
      &:focus,
      &:hover {
        p {
          border-bottom: 1px solid #ecf5ff;
        }
      }
      span {
        float: right;
        background-color: $blue-color;
        height: 24px;
        line-height: 24px;
        padding: 0 4px;
        color: #ffffff;
        border-radius: 4px;
        margin-top: 11px;
      }
    }
  }
}
.list-menu {
  .list-menu-more {
    margin: 0 10px 10px 10px;
    .el-button {
      width: 100%;
      border: 0;
      background: #ebeef5;
      border-radius: 10px;
      color: $blue-color;
    }
    .el-button--primary.is-plain:focus,
    .el-button--primary.is-plain:hover {
      color: #ffffff;
      background-color: $blue-color;
      i {
        color: #ffffff;
      }
    }
    i {
      color: $blue-color;
      -webkit-transform: rotate(-90deg);
      transform: rotate(-90deg);
      font-size: 12px;
      margin: -2px 0 0 6px;
      font-weight: 700;
    }
  }
}
// 筛选
.list-select {
  font-size: 14px;
}
.list-filter-l {
  .el-input {
    font-size: 14px;
  }
  .el-input__inner {
    height: 36px;
    line-height: 36px;
    background-color: #fafafa;
    border-color: #dcdfe6;
  }
}
.list-l-wrap {
  .el-checkbox__inner {
    width: 16px;
    height: 16px;
    border-color: #dddddd;
  }
}
.list-table-head {
  .el-checkbox__label {
    line-height: 16px;
    padding-left: 20px;
  }
}
// 折叠面板
.list-table-item-b {
  .el-collapse-item__content {
    padding: 0;
  }
}
.list-collapse {
  .el-collapse-item__header {
    position: absolute;
    right: 40px;
    top: 104px;
    z-index: 1;
    width: 54px;
    text-align: center;
    color: $blue-color;
  }
  .el-collapse-item__arrow {
    display: none;
  }
  .fa-angle-double-down {
    margin-left: 8px;
  }
  .is-active {
    .fa-angle-double-down {
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg);
    }
  }
}
.list-pagination {
  text-align: right;
  .el-pager li {
    border: 1px solid #dcdfe6;
    height: 34px;
    line-height: 34px;
    margin: 0 3px;
    border-radius: 6px;
    &.active {
      color: $blue-color;
      cursor: default;
    }
    &.active + li {
      border-left: normal;
    }
  }
  .el-input--mini .el-input__inner {
    height: 34px;
    line-height: 34px;
  }
  .el-pagination button,
  .el-pagination span:not([class*="suffix"]) {
    height: 34px;
    line-height: 34px;
  }
}
// 弹框
.list-wrapper {
  .el-dialog__title {
    font-size: 16px;
    font-weight: 700;
  }
}
.list-ruleForm {
  .el-form-item__label {
    font-size: 14px;
    font-weight: normal;
  }
  .el-textarea,
  .el-input {
    font-size: 14px;
  }
  .list-ruleForm-add {
    margin-left: 15px;
  }
}
</style>
<style lang="scss" scoped>
// 公共
$main-color: #303133;
$blue-color: #2d54b8;
.el-dropdown-menu__item {
  font-size: 14px;
}
.list-nav {
  border-left: 6px solid $blue-color;
  border-bottom: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 18px;
  float: left;
  .list-nav-title {
    border-radius: 0 4px 0 0;
    border-right: 10px solid #fb9437;
    background-color: $blue-color;
    color: #ffffff;
    padding: 0 10px 0 15px;
    height: 46px;
    line-height: 46px;
    span {
      float: left;
    }
    i {
      float: right;
      font-size: 18px;
      height: 46px;
      line-height: 46px;
    }
  }
}
.text-right {
  text-align: right;
  padding-right: 10px;
}
// 按钮以及图标
.svg-icon {
  margin-right: 10px;
  color: $main-color;
}
.el-dropdown {
  margin: 0 12px;
  .el-button {
    padding: 10px;
    font-size: 14px;
  }
}
.el-button + .el-button {
  margin-left: 12px;
}
.el-button:focus,
.el-button:hover {
  .svg-icon {
    color: #409eff;
  }
}
.el-button--danger {
  .svg-icon {
    color: #ffffff;
  }
}
.el-button--danger:focus,
.el-button--danger:hover {
  .svg-icon {
    color: #ffffff;
  }
}
.el-checkbox-group {
  font-size: 14px;
  color: #606266;
}
.list-wrapper,
button,
input,
optgroup,
select,
textarea {
  font-family: "PingFang SC", Microsoft YaHei, Arial, sans-serif !important;
  font-size: 14px;
}
// 内容
.list-wrapper {
  background-color: #f7f7f7;
  font-size: 16px;
  color: $main-color;
  // margin-top: 20px;
}
.list-main {
  margin: 0 auto;
  width: 1200px;
  overflow: hidden;
}
.list-pagination {
  text-align: right;
}
.list-breadcrumb {
  margin: 20px 0;
  padding-left: 14px;
  height: 14px;
  line-height: 14px;
  position: relative;
  &::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background-color: $blue-color;
  }
  .el-breadcrumb__separator {
    margin: 0 10px;
    font-weight: normal;
    color: #a6a6a6;
  }
}
.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link {
  color: #404040;
}
.el-breadcrumb__item:last-child .el-breadcrumb__inner,
.el-breadcrumb__item:last-child .el-breadcrumb__inner a,
.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
  color: #a6a6a6;
}
.list-t {
  margin-bottom: 14px;
  overflow: hidden;
  width: 888px;
  float: right;
  .list-t-l {
    float: left;
    width: 270px;
    font-size: 24px;
  }
  .list-t-r {
    // margin-left: 270px;
    .list-t-r-action {
      width: 100%;
      text-align: right;
      .el-button--primary {
        background-color: $blue-color;
        border-color: $blue-color;
        color: #ffffff;
        .svg-icon {
          color: #ffffff;
        }
        &:focus,
        &:hover {
          background: #5176c1;
          border-color: #5176c1;
          .svg-icon {
            color: #ffffff;
          }
        }
      }
      .el-button--medium {
        padding-left: 10px;
        padding-right: 10px;
        font-size: 14px;
      }
      i {
        font-size: 14px;
        margin-right: 8px;
      }
    }
  }
}
.list-content {
  overflow: hidden;
  width: 100%;
}
// 左侧菜单
.list-nav {
  width: 270px;
  float: left;
  background-color: #fff;
}
// 右侧
.list-filter {
  overflow: hidden;
  margin-bottom: 20px;
  height: 36px;
  line-height: 36px;
  .list-filter-l {
    float: left;
    font-weight: 700;
    font-size: 14px;
    .el-select {
      width: 120px;
    }
  }
  .list-filter-r {
    float: right;
    .el-checkbox {
      color: $main-color;
      float: left;
    }
    .list-filter-open {
      float: left;
      margin: 0 0 0 40px;
      font-size: 14px;
      color: $blue-color;
      i {
        margin-left: 8px;
      }
      &.is-active {
        i {
          transform: rotate(180deg);
        }
      }
      &:hover,
      &:focus {
        cursor: pointer;
        color: #66b1ff;
      }
    }
  }
}
// 列表
.list-list {
  // margin-left: 310px;
  background-color: #ffffff;
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  margin-top: 20px;
}
.list-l-wrap {
  margin: 20px;
}
.list-table-head {
  .el-checkbox {
    font-weight: 700;
    color: $main-color;
    margin-left: 10px;
  }
  .list-t-h-tag {
    background-color: #ebeef5;
    color: $blue-color;
    height: 26px;
    line-height: 26px;
    padding: 0 10px;
    display: inline-block;
    border-radius: 6px;
    margin-left: 20px;
  }
}
.list-table-body {
  line-height: 30px;
  margin: 6px 0 0 44px;
}
.el-collapse {
  border: 0;
}
.list-table-item {
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 30px;
    z-index: 1;
    height: 92px;
    width: 6px;
    border-radius: 0 6px 6px 0;
    background-color: $blue-color;
  }
  .list-table-item-t {
    padding: 20px 20px 11px 10px;
  }
  .list-table-l {
    margin-right: 142px;
  }
  .list-table-r {
    width: 104px;
    float: right;
    position: absolute;
    right: 20px;
    top: 16px;
    .el-button {
      width: 104px;
      padding: 10px 0;
      margin-bottom: 10px;
      display: block;
    }
    .el-button--danger {
      color: #ffffff;
    }
    div {
      overflow: hidden;
    }
    i {
      font-size: 14px;
      margin-right: 10px;
    }
  }
}
// 折叠面板
.list-collapse-con {
  background-color: #f9fafc;
  padding: 20px;
  overflow: hidden;
  .list-collapse-item {
    margin-bottom: 6px;
  }
  .list-collapse-title {
    color: $main-color;
    font-size: 14px;
    font-weight: 700;
    position: relative;
    height: 20px;
    line-height: 20px;
    padding-left: 10px;
    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 3px;
      z-index: 1;
      width: 4px;
      height: 14px;
      background-color: $blue-color;
    }
  }
  .list-collapse-body {
    margin-top: 10px;
    line-height: 30px;
    .list-collapse-history-step {
      float: left;
      text-align: center;
      .list-collapse-history-date {
        text-align: center;
        color: #909399;
        font-size: 14px;
      }
      .list-collapse-history-name {
        height: 46px;
        line-height: 46px;
        background-color: #ebeef5;
        color: $blue-color;
        display: inline-block;
        padding: 0 14px;
        min-width: 104px;
        font-size: 16px;
        border-radius: 6px;
      }
    }
    .list-collapse-history-line {
      background-color: #2d54b8;
      height: 3px;
      padding: 0 56px;
      margin-top: 52px;
      position: relative;
      width: 126px;
      float: left;
    }
    .fa-angle-right {
      background-color: $blue-color;
      width: 24px;
      text-align: center;
      height: 24px;
      line-height: 24px;
      border-radius: 50%;
      color: #ffffff;
      font-size: 28px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;
    }
  }
}
</style>
